<template>
	<view>
		<!--  手机顶部高度 -->
		<view :style="{height: systemBarHeight + 'px'}">
		</view>
		<view class="navbar">
			<uni-nav-bar @clickLeft="fh" :border="false" left-icon="left" title="产品对比" />
		</view>
		<view class="select">
			<view class="select1">
				<image src="/static/model/vs.png" mode=""></image>
			</view>
			<view class="selectlist">
				<scroll-view class="scroll" scroll-x="true" >


					<view class="productlist">
						<view class="selectlist_item">
							<view class="product_top" v-if="dz==false" @click="dzchange()">
								<image src="/static/model/dingzhu.png" mode=""></image>
								<text>钉在左侧</text>
							</view>
							<view class="product_top1" v-if="dz==true">
								<image src="/static/model/dingzhu1.png" mode=""></image>
								<text>已定住</text>
								<uni-icons class="icon" type="clear" size="20"></uni-icons>
							</view>

							<view class="product_icon">
								<image src="/static/logo.png" mode=""></image>
								<text>Model25款首发版…</text>
							</view>
						</view>

						<view class="selectlist_item">
							<view class="product_top" v-if="dz==false" @click="dzchange()">
								<image src="/static/model/dingzhu.png" mode=""></image>
								<text>钉在左侧</text>
							</view>
							<view class="product_top1" v-if="dz==true">
								<image src="/static/model/dingzhu1.png" mode=""></image>
								<text>已定住</text>
								<uni-icons class="icon" type="clear" size="20"></uni-icons>
							</view>

							<view class="product_icon">
								<image src="/static/logo.png" mode=""></image>
								<text>Model25款首发版…</text>
							</view>
						</view>
						<view class="product_tianjia">
							<image src="/static/model/tianjia1.png" mode=""></image>
							<text>添加产品对比</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="tot">

		</view>
		<view class="contrast">

			<view class="tabs">
				<v-tabs v-model="current" color="#7D8CA4" active-color="#152034" line-color="#386AF6" line-height="8rpx"
					:line-scale="0.2" :scroll="false" :tabs="tabs" @change="changeTab"></v-tabs>
			</view>

			<!-- canshu -->
			<view class="param" v-if="current==0">
				<!-- 1 -->
				<view class="param_tit">
					<view class="param_tit1">
						<image src="/static/index/jiqi1.png" mode=""></image>
						<text>控制核心</text>
					</view>
					<view class="param_tit2">
						<text>隐藏相同参数</text>
						<image src="/static/index/lookmi.png" v-if="zsyc==false" mode="" @click="zschange()"></image>
						<image src="/static/index/lookmi1.png" mode="" v-if="zsyc==true" @click="zschange()"></image>
					</view>
				</view>

				<view class="paramlist">
					<view class="paramlist_lf">
						<view class="paramtype" v-for="(item,index) in typelist" :key="index">
							<text>{{item.type}}</text>
						</view>
					</view>
					<scroll-view class="scroll" scroll-x="true" scroll-left="120">
						<view class="paramlist_item">
							<view class="paramlist_rglist">
								<view class="paramlist_rg" v-for="(item,index) in parmamlist" :key="index">
									<text>{{item.tit}}</text>
								</view>
							</view>
							<view class="paramlist_rglist">
								<view class="paramlist_rg" v-for="(item,index) in parmamlist" :key="index">
									<text>{{item.tit}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 2 -->
				<view class="param_tit">
					<view class="param_tit1">
						<image src="/static/index/jiqi1.png" mode=""></image>
						<text>电池组</text>
					</view>

				</view>

				<view class="paramlist">
					<view class="paramlist_lf">
						<view class="paramtype" v-for="(item,index) in typelist" :key="index">
							<text>{{item.type}}</text>
						</view>
					</view>
					<scroll-view class="scroll" scroll-x="true" scroll-left="120">
						<view class="paramlist_item">
							<view class="paramlist_rglist">
								<view class="paramlist_rg" v-for="(item,index) in parmamlist" :key="index">
									<text>{{item.tit}}</text>
								</view>
							</view>
							<view class="paramlist_rglist">
								<view class="paramlist_rg" v-for="(item,index) in parmamlist" :key="index">
									<text>{{item.tit}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 3 -->
				<view class="param_tit">
					<view class="param_tit1">
						<image src="/static/index/jiqi1.png" mode=""></image>
						<text>灵巧手</text>
					</view>

				</view>

				<view class="paramlist">
					<view class="paramlist_lf">
						<view class="paramtype" v-for="(item,index) in typelist" :key="index">
							<text>{{item.type}}</text>
						</view>
					</view>
					<scroll-view class="scroll" scroll-x="true" scroll-left="120">
						<view class="paramlist_item">
							<view class="paramlist_rglist">
								<view class="paramlist_rg" v-for="(item,index) in parmamlist" :key="index">
									<text>{{item.tit}}</text>
								</view>
							</view>
							<view class="paramlist_rglist">
								<view class="paramlist_rg" v-for="(item,index) in parmamlist" :key="index">
									<text>{{item.tit}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- tu -->
			<view class="icon" v-if="current==1">
				<view class="icon_tit">
					<image src="/static/index/jiqi1.png" mode=""></image>
					<text>正面</text>
				</view>
				<scroll-view class="scroll" scroll-x="true" >

					<view class="iconlist">
						<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
					
					</view>
				</scroll-view>

				<view class="icon_tit">
					<image src="/static/index/jiqi1.png" mode=""></image>
					<text>背面</text>
				</view>
				<scroll-view class="scroll" scroll-x="true" >

					<view class="iconlist">
						<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
					<view class="icon_item">
						<image src="/static/logo.png" mode=""></image>
					</view>	<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
					</view>
				</scroll-view>

				<view class="icon_tit">
					<image src="/static/index/jiqi1.png" mode=""></image>
					<text>手臂</text>
				</view>
				<scroll-view class="scroll" scroll-x="true" >

					<view class="iconlist">
						<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="icon_item">
							<image src="/static/logo.png" mode=""></image>
						</view>
					
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				dz: false,
				current: 1,
				zsyc: false,
				tabs: ['参数对比', '图片对比'],

				typelist: [{
						type: '控制系统'
					},
					{
						type: '控制系统'
					},
					{
						type: '控制系统'
					},
					{
						type: '控制系统'
					},
					{
						type: '控制系统'
					}
				],
				parmamlist: [{
						tit: 'Preempt+Android '
					},
					{
						tit: ' USB3.2*2 '
					},
					{
						tit: ' USB3.2*2 '
					},
					{
						tit: ' USB3.2*2 '
					},
					{
						tit: ' USB3.2*2 '
					}
				]
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			dzchange() {
				this.dz = !this.dz
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
			},
			zschange() {
				this.zsyc = !this.zsyc
			},
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select {
		display: flex;
		align-items: center;
		height: 330rpx;

		.select1 {
			>image {
				width: 187.02rpx;
				height: 187.02rpx;
			}
		}

		.selectlist {
			display: flex;
			width: 600rpx;
			height: 330rpx;

			.selectlist_item {
				width: 219rpx;
				height: 258rpx;
				background: linear-gradient(180deg, #CAEFFF 0%, #F3FAFF 100%);
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				
				margin-right: 30rpx;
				margin-top: 40rpx;
				flex-shrink: 0;

				.product_top {
					display: flex;
					align-items: center;
					width: 219rpx;
					height: 46rpx;

					>image {
						height: 34.35rpx;
						width: 34.35rpx;
						margin-left: 13rpx;
					}

					>text {
						height: 34.35rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 23rpx;
						color: #45516B;
					}

				}

				.product_top1 {
					display: flex;
					align-items: center;
					height: 46rpx;
					position: relative;
					width: 219rpx;
					
					>image {
						height: 34.35rpx;
						width: 34.35rpx;
						margin-left: 13rpx;
					}

					>text {
						height: 34.35rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 23rpx;
						color: #152034;
					}

					.icon {
						position: absolute;
						right: -180rpx;
						top: -15rpx;
						z-index: 999;
					}
				}

				.product_icon {
					display: flex;
					justify-content: center;
					margin-top: 15rpx;
					flex-direction: column;

					>image {
						width: 95rpx;
						height: 95rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						margin: auto;
					}

					>text {
						width: 145rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #152034;
						margin: 5rpx auto;
					}
				}

			}
		}


	}

	.scroll {
		width: 550rpx;
		height: 330rpx;
		display: flex !important;
	}

	.productlist {
		display: flex;
	}

	.product_tianjia {
		width: 219rpx;
		height: 258rpx;
		background: #FAFAFA;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-top: 40rpx;
		flex-shrink: 0;
		border: 1rpx dashed #E4EBF7;
		display: flex;

		flex-direction: column;

		>image {
			width: 40rpx;
			height: 40rpx;
			margin: 90rpx auto 0;
		}

		>text {

			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7D8CA4;
			margin: 10rpx auto 0;
		}
	}

	.tot {
		width: 750rpx;
		height: 15rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tabs {
		width: 60%;
		margin: 38rpx auto 0;
	}

	.param {
		.param_tit {
			width: 91%;
			margin: 30rpx auto 0;
			display: flex;

			.param_tit1 {
				display: flex;
				align-items: center;

				>image {
					width: 34.35rpx;
					height: 34.35rpx;
				}

				>text {
					margin-left: 15rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #152034;
				}
			}

			.param_tit2 {
				margin-left: auto;
				display: flex;
				align-items: center;

				>image {
					width: 45.8rpx;
					height: 45.8rpx;
				}

				>text {
					height: 45.8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #7D8CA4;
					margin-right: 15rpx;
				}
			}

		}

		.paramlist {
			display: flex;
			margin-top: 15rpx;
			margin-left: 40rpx;

			.paramlist_lf {
				width: 149rpx;
				background: #FFFFFF;
				border-radius: 15rpx 0rpx 0rpx 15rpx;
				border: 1rpx solid #E4EBF7;
				margin-top: 15rpx;
				margin-bottom: 15rpx;

				.paramtype {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 19rpx;
					color: #45516B;
					margin-top: 15rpx;
					margin-bottom: 15rpx;
					margin-left: 30rpx;
				}
			}
		}

		.scroll {
			width: 550rpx;
			height: 100%;
			margin-top: 15rpx;

			.paramlist_rglist {

				background: #FAFAFA;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 1rpx solid #E4EBF7;
				width: 221rpx;
				flex-shrink: 0;

				.paramlist_rg {
					margin-top: 15rpx;
					margin-bottom: 15rpx;
					display: flex;
					justify-content: center;

					>text {
						margin: auto;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 19rpx;
						color: #7D8CA4;

					}
				}
			}

		}

	}

	.paramlist_item {
		display: flex;
	}

	.icon {
		width: 91%;
		margin: auto;

		.icon_tit {

			margin: 30rpx auto 0;
			display: flex;
			align-items: center;

			>image {
				width: 34.35rpx;
				height: 34.35rpx;
			}

			>text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #152034;
				margin-left: 15rpx;
			}
		}

		.scroll {
			width: 689rpx;

			.iconlist {
				display: flex;
				margin-top: 30rpx;

				.icon_item {
					margin-right: 15rpx;

					>image {
						width: 336rpx;
						height: 233rpx;
						background: #FFFFFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}
			}
		}

	}
</style>